<template>
  <a-form id="components-form-demo-normal-login" :form="userform" class="login-form">
    <a-form-item label="用户名">
      <a-input
        v-decorator="[
          'username',
          { rules: [ { required: true, whitespace: true, message: '用户名必须输入' },
                    { min: 4, message: '用户名至少4位' },
                    { max: 12, message: '用户名最多12位' },
                    { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名必须是英文、数字或下划线组成' }] },
        ]"
        placeholder="用户名"
      ></a-input>
    </a-form-item>
        <a-form-item v-if="isUpdate" style="display:none">
      <a-input
        v-decorator="['_id']"></a-input>
    </a-form-item>
    <a-form-item v-if="!isUpdate" label="密码">
      <a-input
        v-decorator="[
          'password',
          { rules: [{ required: true, whitespace: true, message: '密码必须输入' },
                    { min: 4, message: '密码至少4位' },
                    { max: 12, message: '密码最多12位' },
                    { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名必须是英文、数字或下划线组成' }] },
        ]"
        type="password"
        placeholder="密码"
      ></a-input>
    </a-form-item>
    <a-form-item label="手机号码">
      <a-input v-decorator="[
          'phone']" placeholder="请输入手机号码"></a-input>
    </a-form-item>
    <a-form-item label="邮箱">
      <a-input v-decorator="[
          'email']" type="email" placeholder="请输入邮箱"></a-input>
    </a-form-item>
    <a-form-item label="角色">
      <a-select
        v-decorator="[
          'role_id',
          { rules: [{ required: true, whitespace: true, message: '必须选择用户所属角色' },] },
        ]"
      >
        <a-select-option v-for="item in roles" :value="item._id" :key="item._id">{{item.name}}</a-select-option>
      </a-select>
    </a-form-item>
  </a-form>
</template>
<script>
import {} from "../../../api/index";
export default {
  props: ["roles", "users", "isUpdate", "updateInfo"],
  data() {
    return {
      email: "",
      phone: "",
      username: ""
    };
  },
  created() {
    console.log("created");
    this.userform = this.$form.createForm(this, { name: "userForm" });
    this.$emit("initform", this.userform);
  },
  mounted() {
    this.reSetUpdataInfo(this.updateInfo);
  },
  watch: {
    updateInfo: function(newV) {
      console.log(newV)
      this.reSetUpdataInfo(newV);
    }
  },
  methods: {
    reSetUpdataInfo(info) {
      if (info._id !== undefined) {
        console.log("重置了!");
        var { username, role_id, phone, email, password,_id } = info;
        this.username = username;
        this.userform.setFieldsValue({ _id: _id })
        this.userform.setFieldsValue({ username: username })
        this.userform.setFieldsValue({ email: email })
        this.userform.setFieldsValue({ role_id: role_id })
        this.userform.setFieldsValue({ phone: phone })
      } else {
        this.userform.resetFields();
      }
    }
  }
};
</script>
<style lang="stylus" scoped></style>